{% extends "admin42/configuration/base.html" %}
{% load admin_utils %}
{% block main_content %}
<div id="platform-tmpl-list" class="p20">
    <bk-button theme="primary" class="mb20" @click="handleCreate">
        创建模板配置
    </bk-button>

    <bk-table :data="data">
        <bk-table-column label="模板名称" prop="name" width="200"></bk-table-column>
        <bk-table-column label="模板类型" width="100">
            <template slot-scope="props">
                <span v-if="props.row.type === 'normal'">普通应用</span>
                <span v-if="props.row.type === 'plugin'">插件模板</span>
            </template>
        </bk-table-column>
        <bk-table-column label="展示用名称">
            <template slot-scope="props">
                <span v-bk-tooltips="props.row.display_name_zh_cn">
                    $[ props.row.display_name_zh_cn ]
                </span>
            </template>
        </bk-table-column>
        <bk-table-column label="模板描述">
            <template slot-scope="props">
                <span v-bk-tooltips="props.row.description_zh_cn">
                    $[ props.row.description_zh_cn ]
                </span>
            </template>
        </bk-table-column>
        <bk-table-column label="开发语言" prop="language" width="80"></bk-table-column>
        <bk-table-column label="应用集市" width="80" align="center">
            <template slot-scope="props">
                <span v-if="props.row.market_ready">✅</span>
                <span v-else>❌</span>
            </template>
        </bk-table-column>
        <bk-table-column label="隐藏" width="60" align="center">
            <template slot-scope="props">
                <span v-if="props.row.is_hidden">是</span>
                <span v-else>否</span>
            </template>
        </bk-table-column>
        <bk-table-column label="操作" width="200">
            <template slot-scope="props">
                <bk-button class="ml5" theme="primary" text @click="handleView(props.row)">查看详情</bk-button>
                <bk-button class="ml5" theme="primary" text @click="handleEdit(props.row)">编辑</bk-button>
                <bk-button class="ml5" theme="danger" text @click="handleDelete(props.row)">删除</bk-button>
            </template>
        </bk-table-column>
    </bk-table>

    <!-- 查看应用模板详情弹窗 -->
    <bk-dialog
        v-model="readOnlyDialog.visible"
        header-position="left"
        width="800"
        :mask-close="true"
        :show-footer="false"
    >
        <div slot="header">查看模板配置</div>
        <bk-form :label-width="140" :model="readOnlyDialog.form" :rules="rules">
            <bk-form-item label="模板名称">
                <bk-input v-model="readOnlyDialog.form.name" disabled="true"></bk-input>
            </bk-form-item>
            <bk-form-item label="模板类型">
                <bk-select v-model="readOnlyDialog.form.type" disabled="true">
                   <bk-option v-for="choice in getChoices(typeChoices)"
                        :key="choice.id"
                        :id="choice.id"
                        :name="choice.name">
                    </bk-option>
                </bk-select>
            </bk-form-item>
            <bk-form-item label="展示用名称（中）">
                <bk-input v-model="readOnlyDialog.form.display_name_zh_cn" disabled="true"></bk-input>
            </bk-form-item>
            <bk-form-item label="展示用名称（英）">
                <bk-input v-model="readOnlyDialog.form.display_name_en" disabled="true"></bk-input>
            </bk-form-item>
            <bk-form-item label="描述（中）">
                <bk-input v-model="readOnlyDialog.form.description_zh_cn" disabled="true"></bk-input>
            </bk-form-item>
            <bk-form-item label="描述（英）">
                <bk-input v-model="readOnlyDialog.form.description_en" disabled="true"></bk-input>
            </bk-form-item>
            <bk-form-item label="开发语言">
                <bk-select v-model="readOnlyDialog.form.language" disabled="true">
                   <bk-option v-for="choice in getChoices(langChoices)"
                        :key="choice.id"
                        :id="choice.id"
                        :name="choice.name">
                    </bk-option>
                </bk-select>
            </bk-form-item>
            <bk-form-item label="可发布到应用集市">
                <span v-if="readOnlyDialog.form.market_ready">✅</span>
                <span v-else>❌</span>
            </bk-form-item>
            <bk-form-item label="预设增强服务配置">
                <json-pretty
                    :data="readOnlyDialog.form.preset_services_config"
                    show-length highlight-mouseover-node :deep="1"
                ></json-pretty>
            </bk-form-item>
            <bk-form-item label="二进制包存储路径">
                <span>$[ readOnlyDialog.form.blob_url ]</span>
            </bk-form-item>
            <bk-form-item label="必须的构建工具">
                <template v-if="readOnlyDialog.form.required_buildpacks.length === 0">
                    <span class="ml10">--</span>
                </template>
                <template v-else-if="readOnlyDialog.form.required_buildpacks instanceof Array">
                    <span v-for="tag in readOnlyDialog.form.required_buildpacks">
                        <bk-tag>$[ tag ]</bk-tag>
                    </span>
                </template>
                <template v-else>
                    <div v-for="(bps, stack_name) in readOnlyDialog.form.required_buildpacks">
                        <div>
                            <span v-if="stack_name != '__default__'">基础镜像 <b>$[ stack_name ]</b> 的构建工具: </span>
                            <span v-else>默认构建工具(对所有镜像生效): </span>
                            <span v-for="tag in bps" v-if="bps.length">
                                <bk-tag>$[ tag ]</bk-tag>
                            </span>
                            <span v-else>--</span>
                        </div>
                    </div>
                </template>
            </bk-form-item>
            <bk-form-item label="进程配置">
                <json-pretty
                    :data="readOnlyDialog.form.processes"
                    show-length highlight-mouseover-node :deep="1"
                ></json-pretty>
            </bk-form-item>
            <bk-form-item label="标签">
                <span v-for="tag in readOnlyDialog.form.tags">
                    <bk-tag>$[ tag ]</bk-tag>
                </span>
                <span v-if="!readOnlyDialog.form.tags.length" class="ml10">--</span>
            </bk-form-item>
            <bk-form-item label="代码仓库信息">
                <bk-input v-model="readOnlyDialog.form.repo_url" disabled="true"></bk-input>
            </bk-form-item>
            <bk-form-item label="是否隐藏">
                <span v-if="readOnlyDialog.form.is_hidden">是</span>
                <span v-else>否</span>
            </bk-form-item>
        </bk-form>
    </bk-dialog>

    <!-- 创建/更新/删除应用模板弹窗 -->
    <bk-dialog
        v-model="dialog.visible"
        header-position="left"
        width="800"
        :confirm-fn="submitDialog"
        @cancel="cancelDialog"
        :mask-close="false"
    >
        <div slot="header">
            $[ dialog.type === 'create'?'添加':(dialog.type === 'edit'?'编辑':'删除') ]模板配置
        </div>
        <bk-form :label-width="140" :model="dialog.form" :rules="rules">
            <bk-form-item label="模板名称" :property="name" :required="true" :desc="dialog.type !== 'create'?'创建后不可变更':''">
                <bk-input v-model="dialog.form.name" :disabled="dialog.type !== 'create'" placeholder="只能由字符 [a-zA-Z0-9-_] 组成"></bk-input>
            </bk-form-item>
            <bk-form-item label="模板类型" :required="true">
                <bk-select v-model="dialog.form.type" searchable>
                   <bk-option v-for="choice in getChoices(typeChoices)"
                        :key="choice.id"
                        :id="choice.id"
                        :name="choice.name">
                    </bk-option>
                </bk-select>
            </bk-form-item>
            <bk-form-item label="展示用名称（中）" :required="true">
                <bk-input v-model="dialog.form.display_name_zh_cn"></bk-input>
            </bk-form-item>
            <bk-form-item label="展示用名称（英）" :required="true">
                <bk-input v-model="dialog.form.display_name_en"></bk-input>
            </bk-form-item>
            <bk-form-item label="描述（中）" :required="true">
                <bk-input v-model="dialog.form.description_zh_cn"></bk-input>
            </bk-form-item>
            <bk-form-item label="描述（英）" :required="true">
                <bk-input v-model="dialog.form.description_en"></bk-input>
            </bk-form-item>
            <bk-form-item label="开发语言" :required="true">
                <bk-select v-model="dialog.form.language" searchable>
                   <bk-option v-for="choice in getChoices(langChoices)"
                        :key="choice.id"
                        :id="choice.id"
                        :name="choice.name">
                    </bk-option>
                </bk-select>
            </bk-form-item>
            <bk-form-item label="可发布到应用集市">
                <bk-switcher v-model="dialog.form.market_ready"></bk-switcher>
            </bk-form-item>
            <bk-form-item label="预设增强服务配置">
                <json-editor v-model="dialog.form.preset_services_config"></json-editor>
            </bk-form-item>
            <bk-form-item label="二进制包存储路径" :required="true">
                <json-editor v-model="dialog.form.blob_url"></json-editor>
            </bk-form-item>
            <bk-form-item label="必须的构建工具">
                <json-editor v-model="dialog.form.required_buildpacks"></json-editor>
            </bk-form-item>
            <bk-form-item label="进程配置">
                <json-editor v-model="dialog.form.processes"></json-editor>
            </bk-form-item>
            <bk-form-item label="标签">
                <json-editor v-model="dialog.form.tags"></json-editor>
            </bk-form-item>
            <bk-form-item label="代码仓库信息">
                <bk-input v-model="dialog.form.repo_url"></bk-input>
            </bk-form-item>
            <bk-form-item label="是否隐藏">
                <bk-switcher v-model="dialog.form.is_hidden"></bk-switcher>
            </bk-form-item>
        </bk-form>
    </bk-dialog>
</div>

{% endblock %}


{% block main_script %}
<script>
const typeChoices = {{ type_choices | to_json }}
const langChoices = {{ language_choices | to_json }}

const URLRouter = {
    create: decodeURI("{% url 'admin.configuration.tmpl' %}"),
    list: decodeURI("{% url 'admin.configuration.tmpl' %}"),
    detail: decodeURI("{% url 'admin.configuration.tmpl.detail' '${id}' %}"),
}

document.addEventListener('DOMContentLoaded', () => {
    new Vue({
        el: "#platform-tmpl-list",
        delimiters: ['$[', ']'],
        mixins: [SubmitMixin],
        data: function () {
            return {
                typeChoices: typeChoices,
                langChoices: langChoices,
                data: [],
                dialog: {
                    form: {
                        id: undefined,
                        name: '',
                        type: '',
                        display_name_zh_cn: '',
                        display_name_en: '',
                        description_zh_cn: '',
                        description_en: '',
                        language: '',
                        market_ready: false,
                        preset_services_config: {},
                        blob_url: "",
                        required_buildpacks: [],
                        processes: {},
                        tags: [],
                        repo_url: '',
                        is_hidden: false,
                    },
                    row: undefined
                },
                readOnlyDialog: {
                    visible: false,
                    form: {
                        required_buildpacks: [],
                        tags: [],
                        blob_url: ""
                    }
                },
                rules: {
                    name: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            max: 32,
                            message: '不能多于32个字符',
                            trigger: 'blur'
                        },
                       {
                            validator: function (val) {
                                let regex = new RegExp("^[a-zA-Z0-9-_]{1,128}$","");
                                return val.match(regex) !== null
                            },
                            message: '只能由字符 [a-zA-Z0-9-_] 组成',
                            trigger: 'blur'
                        }
                    ],
                    type: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                    ],
                    display_name_zh_cn: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                    ],
                    display_name_en: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                    ],
                    description_zh_cn: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        }
                    ],
                    description_en: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        }
                    ],
                    language: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        }
                    ],
                    blob_url: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        }
                    ],
                }
            }
        },
        mounted: function () {
            this.fetchTmplConfList()
        },
        methods: {
            fillUrlTemplate: function (url_template, {row}) {
                if (!row)
                    row = {}
                return url_template.replace("${id}", row.id)
            },
            cancelDialog: function () {},
            processData: function (data) {
                return new Promise(resolve => {
                  resolve(data)
                }
              )
            },
            fetchTmplConfList: async function () {
                const el = this.$bkLoading({title: '加载中'})
                try {
                    await this.$http.get(URLRouter['list']).then(res => {
                        this.data = res.results
                    })
                } finally {
                    el.hide = true
                }
            },
            submitCallback: function () {
                return this.fetchTmplConfList()
            },
            handleCreate: function () {
                this.dialog.type = "create"
                this.dialog.row = undefined

                this.dialog.form = {
                    id: undefined,
                    name: '',
                    type: '',
                    display_name_zh_cn: '',
                    display_name_en: '',
                    description_zh_cn: '',
                    description_en: '',
                    language: '',
                    market_ready: false,
                    preset_services_config: {},
                    blob_url: {},
                    enabled_regions: [],
                    required_buildpacks: [],
                    processes: {},
                    tags: [],
                    repo_url: '',
                    is_hidden: false,
                }
                this.dialog.visible = true
            },
            handleEdit: function (row){
                this.dialog.type = "edit"
                this.dialog.row = row

                this.dialog.form = {...row}
                this.dialog.visible = true
            },
            handleDelete: function (row) {
                this.dialog.type = "delete"
                this.dialog.row = row

                this.dialog.form = {...row}
                this.dialog.visible = true
            },
            handleView: function (row) {
                this.readOnlyDialog.form = {...row}
                this.readOnlyDialog.visible = true
            },
            getChoices: function (choices) {
                return Object.keys(choices).map(key => {
                    return {
                        id: key,
                        name: choices[key],
                    }
                })
            },
        },
    })
})

</script>
{% endblock %}
